import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTableEditable,
    WeaBrowser,
    WeaSelect,
    WeaCheckbox,
    WeaInput,
    WeaError,
    WeaInputNumber,
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Row, Col, Modal, Button, Input, message, Form} from 'antd';
import _ from 'lodash';
import LanguageConstant from '../../constant/LanguageConstant';
import {indexOf, isBlank, parseIntValue, null2String} from '../../util/CommonUtil';

const FormItem = Form.Item;
const InputGroup = Input.Group;
const confirm = Modal.confirm;
const {getLabel} = WeaLocaleProvider;

/**
 * 编辑模板权限组件
 */
@inject("editPermissionStore")
@observer
class EditPermissionComponent extends Component {

    componentDidMount() {
        const {editPermissionStore, mouldId} = this.props;
        editPermissionStore.init({mouldId});
        console.log("EditPermissionComponent#componentDidMount")
        if (mouldId > 0) {
            editPermissionStore.getMouldPermissionTable();
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {editPermissionStore, mouldId} = this.props;
        const {mouldId: nextPropsMouldId} = nextProps;
        if (nextPropsMouldId != mouldId) {
            editPermissionStore.init({mouldId});
            console.log("EditPermissionComponent#componentWillReceiveProps")
            if (mouldId > 0) {
                editPermissionStore.getMouldPermissionTable();
            }
        }
    }

    render() {
        return (
            <div className="edit-permission-component">
                {this.renderForm()}
                {this.renderEditableTable()}
            </div>
        );
    }

    /**
     * 渲染表单
     */
    renderForm = () => {
        const {editPermissionStore} = this.props;
        const {
            changePermissionSelect, changePermissionBrowserField, changPermissionSecurityLevel, updateRefObj,
            mouldPermissionData: mouldPermissionDataStoreData
        } = editPermissionStore;
        const mouldPermissionData = toJS(mouldPermissionDataStoreData);
        let {minSecurityLevel, maxSecurityLevel, orgRelation, type} = mouldPermissionData;
        let style = {marginBottom: 10, minHeight: "40px"};
        return (
            <div className="edit-permission-form" style={{padding: 20}}>
                <Form>
                    <FormItem
                        style={style}
                        label={getLabel(LanguageConstant.PERMISSION_TYPE, "权限类型")}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 12}}>
                        <div style={{float: "left"}}>
                            <WeaSelect
                                fieldName="type"
                                options={[
                                    {
                                        key: "1",
                                        selected: type == 1,
                                        showname: getLabel(LanguageConstant.PERSONNEL, "人员")
                                    },
                                    {key: "2", selected: type == 2, showname: getLabel(LanguageConstant.BRANCH, "分部")},
                                    {
                                        key: "3",
                                        selected: type == 3,
                                        showname: getLabel(LanguageConstant.DEPARTMENT, "部门")
                                    },
                                    {key: "4", selected: type == 4, showname: getLabel(LanguageConstant.ROLE, "角色")},
                                    {key: "5", selected: type == 5, showname: getLabel(LanguageConstant.ALL, "所有人")},
                                    {key: "6", selected: type == 6, showname: getLabel(LanguageConstant.JOB, "岗位")}
                                ]}
                                value={"" + type}
                                style={{width: "100px"}}
                                onChange={(vlaue) => {
                                    changePermissionSelect("type", vlaue)
                                }}
                            >
                            </WeaSelect>
                        </div>
                        {(type == 2 || type == 3) &&
                        <div style={{position: "absolute", left: "120px"}}>
                            <WeaSelect
                                fieldName="orgRelation"
                                options={[
                                    {key: "0", selected: orgRelation == "0", showname: ""},
                                    {
                                        key: "1",
                                        selected: orgRelation == "1",
                                        showname: getLabel(LanguageConstant.INCLUDE_SUPERIOR, "包含上级")
                                    },
                                    {
                                        key: "2",
                                        selected: orgRelation == "2",
                                        showname: getLabel(LanguageConstant.INCLUDE_SUBORDINATE, "包含下级")
                                    }
                                ]}
                                value={"" + orgRelation}
                                style={{width: "100px"}}
                                onChange={(vlaue) => {
                                    changePermissionSelect("orgRelation", vlaue)
                                }}
                            >
                            </WeaSelect>
                        </div>}
                    </FormItem>
                    {/** 人员选择框 **/}
                    {
                        type == 1 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.OBJECT, "对象")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 10}}>
                            <WeaError tipPosition='bottom'
                                      error={getLabel(LanguageConstant.CHOICE, "选择") + getLabel(LanguageConstant.PERSONNEL, "人员") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                      style={{width: "100%"}}
                                      ref={ref => {
                                          updateRefObj("user", ref);
                                      }}
                            >
                                <WeaBrowser
                                    type="17"
                                    title={getLabel(LanguageConstant.PERSONNEL, "人员")}
                                    fieldName="user"
                                    viewAttr="3"
                                    isSingle={false}
                                    replaceDatas={mouldPermissionData.user ? mouldPermissionData.user : new Array()}
                                    onChange={(ids, names, datas) => {
                                        changePermissionBrowserField("user", ids, names, datas)
                                    }}
                                />
                            </WeaError>
                        </FormItem>
                    }
                    {/** 分部 **/}
                    {
                        type == 2 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.OBJECT, "对象")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 10}}>
                            <WeaError tipPosition='bottom'
                                      error={getLabel(LanguageConstant.CHOICE, "选择") + getLabel(LanguageConstant.BRANCH, "分部") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                      style={{width: "100%"}}
                                      ref={ref => {
                                          updateRefObj("subcompany", ref);
                                      }}
                            >
                                <WeaBrowser
                                    type="194"
                                    title={getLabel(LanguageConstant.BRANCH, "分部")}
                                    fieldName="subcompany"
                                    viewAttr="3"
                                    isSingle={false}
                                    replaceDatas={mouldPermissionData.subcompany ? mouldPermissionData.subcompany : new Array()}
                                    onChange={(ids, names, datas) => {
                                        changePermissionBrowserField("subcompany", ids, names, datas)
                                    }}
                                />
                            </WeaError>
                        </FormItem>
                    }
                    {/** 部门 **/}
                    {
                        type == 3 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.OBJECT, "对象")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 10}}>
                            <WeaError tipPosition='bottom'
                                      error={getLabel(LanguageConstant.CHOICE, "选择") + getLabel(LanguageConstant.DEPARTMENT, "部门") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                      style={{width: "100%"}}
                                      ref={ref => {
                                          updateRefObj("dept", ref);
                                      }}
                            >
                                <WeaBrowser
                                    type={57}
                                    title={getLabel(LanguageConstant.DEPARTMENT, "部门")}
                                    tabs={[
                                        {
                                            isSearch: false,
                                            key: "2",
                                            name: "组织结构",
                                            selected: false,
                                            showOrder: 0
                                        },
                                        {
                                            dataParams: {list: "1"},
                                            isSearch: true,
                                            key: "1",
                                            name: "按列表",
                                            selected: false,
                                            showOrder: 0
                                        }
                                    ]}
                                    fieldName="dept"
                                    viewAttr="3"
                                    isSingle={false}
                                    replaceDatas={mouldPermissionData.dept ? mouldPermissionData.dept : new Array()}
                                    onChange={(ids, names, datas) => {
                                        changePermissionBrowserField("dept", ids, names, datas)
                                    }}
                                />
                            </WeaError>
                        </FormItem>
                    }
                    { /** 角色 **/}
                    {
                        type == 4 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.OBJECT, "对象")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 10}}>
                            <WeaError tipPosition='bottom'
                                      error={getLabel(LanguageConstant.CHOICE, "选择") + getLabel(LanguageConstant.ROLE, "角色") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                      style={{width: "100%"}}
                                      ref={ref => {
                                          updateRefObj("role", ref);
                                      }}
                            >
                                <WeaBrowser
                                    type="267"
                                    title={getLabel(LanguageConstant.ROLE, "角色")}
                                    fieldName="role"
                                    viewAttr="3"
                                    replaceDatas={mouldPermissionData.role ? mouldPermissionData.role : new Array()}
                                    onChange={(ids, names, datas) => {
                                        changePermissionBrowserField("role", ids, names, datas)
                                    }}
                                />
                            </WeaError>
                        </FormItem>
                    }
                    { /**  岗位 **/}
                    {
                        type == 6 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.OBJECT, "对象")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 10}}>
                            <WeaError tipPosition='bottom'
                                      error={getLabel(LanguageConstant.CHOICE, "选择") + getLabel(LanguageConstant.JOB, "岗位") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                      style={{width: "100%"}}
                                      ref={ref => {
                                          updateRefObj("job", ref);
                                      }}
                            >
                                <WeaBrowser
                                    type="278"
                                    title={getLabel(LanguageConstant.JOB, "岗位")}
                                    fieldName="job"
                                    viewAttr="3"
                                    isSingle={false}
                                    replaceDatas={mouldPermissionData.job ? mouldPermissionData.job : new Array()}
                                    onChange={(ids, names, datas) => {
                                        changePermissionBrowserField("job", ids, names, datas)
                                    }}
                                />
                            </WeaError>
                        </FormItem>
                    }
                    {/** 安全级别 **/}
                    {
                        type && type != 1 && <FormItem
                            style={style}
                            label={getLabel(LanguageConstant.SECURITY_LEVEL, "安全级别")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 12}}>
                            <InputGroup>
                                <Col span={8}>
                                    <WeaError tipPosition='bottom'
                                              error={getLabel(LanguageConstant.SECURITY_LEVEL, "安全级别") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                              style={{width: "100%"}}
                                              ref={ref => {
                                                  updateRefObj("minSecurityLevel", ref);
                                              }}
                                    >
                                        <WeaInputNumber onChange={(v) => {
                                            changPermissionSecurityLevel("minSecurityLevel", v)
                                        }}
                                                        value={minSecurityLevel}
                                                        id="minSecurityLevel"
                                                        fieldName="minSecurityLevel" name="minSecurityLevel"
                                                        viewAttr="3"/>
                                    </WeaError>
                                </Col>
                                <Col span={2}>
                                    <p className="ant-form-split">-</p>
                                </Col>
                                <Col span={8}>
                                    <WeaError tipPosition='bottom'
                                              error={getLabel(LanguageConstant.SECURITY_LEVEL, "安全级别") + getLabel(LanguageConstant.DO_NOT_FILL, "未填写")}
                                              style={{width: "100%"}}
                                              ref={ref => {
                                                  updateRefObj("maxSecurityLevel", ref);
                                              }}
                                    >
                                        <WeaInputNumber onChange={(v) => {
                                            changPermissionSecurityLevel("maxSecurityLevel", v)
                                        }}
                                                        value={maxSecurityLevel}
                                                        id="maxSecurityLevel"
                                                        fieldName="maxSecurityLevel" name="maxSecurityLevel"
                                                        viewAttr="3"/>
                                    </WeaError>
                                </Col>
                            </InputGroup>
                        </FormItem>
                    }
                </Form>
            </div>
        );
    }


    /**
     * 渲染可编辑表格
     */
    /**
     * 渲染编辑表格
     */
    renderEditableTable = () => {
        const {editPermissionStore} = this.props;
        const {mouldPermissions, willAddPermission, willDeletePermission, onPermissionChange} = editPermissionStore;
        const datas = toJS(mouldPermissions);
        return (
            <div className="edit-permission-table">
                <WeaTableEditable
                    rowKey="id"
                    draggable={false}
                    buttonsType='inline'
                    datas={datas}
                    initialDatas={datas}
                    columns={this.getTableColums()}
                    willAdd={willAddPermission}
                    willDelete={willDeletePermission}
                    onChange={datas => {
                        onPermissionChange(datas)
                    }}
                    showCopy={false}
                />
            </div>
        );
    }

    getTableColums = () => {
        const columns = [{
            title: getLabel(LanguageConstant.PERMISSION_TYPE, "权限类型"),
            dataIndex: "typeShow",
            width: "25%",
            com: [
                {
                    type: "CUSTOM",
                    key: "typeShow",
                    render: (text, record, index, onEdit) => {
                        const typeShow = record.typeShow == undefined ? "" : record.typeShow;
                        return (
                            <span>{typeShow}</span>
                        );
                    }
                }
            ]
        }, {
            title: getLabel(LanguageConstant.OBJECT, "对象"),
            dataIndex: "valuesShow",
            width: "30%",
            com:
                [
                    {
                        type: "CUSTOM",
                        key: "valuesShow",
                        render: (text, record, index, onEdit) => {
                            const valuesShow = record.valuesShow == undefined ? "" : record.valuesShow;
                            return (
                                <span>{valuesShow}</span>
                            );
                        }
                    }
                ]
        }, {
            title: getLabel(LanguageConstant.SECURITY_LEVEL, "安全级别"),
            dataIndex: "securityLevelShow",
            width: "30",
            com: [
                {
                    type: "CUSTOM",
                    key: "securityLevelShow",
                    render: (text, record, index, onEdit) => {
                        const securityLevelShow = record.securityLevelShow == undefined ? "" : record.securityLevelShow;
                        return (
                            <span>{securityLevelShow}</span>
                        );
                    }
                },
            ]
        }
        ];
        return columns;
    }

}

export default EditPermissionComponent;